<template>
    <div class="table-box">
        <ProTable ref="proTable" title="用户列表" :columns="columns" :request-api="getTableList" :init-param="initParam"
            :data-callback="dataCallback">
            <!-- 表格 header 按钮   :tooltip-options="tooltipOptions"-->
            <template #tableHeader="scope">


            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <div>
                    <el-button type="primary" link :icon="View" @click="openDiolg('查看', scope.row)">
                        查看图片
                    </el-button>
                </div>
            </template>
        </ProTable>
        <ExcelUpload ref="ExcelRef" title="导入demo" type="1" :templateParams="templateParams">
        </ExcelUpload>
        <MyDiolg ref="dialogRef" />
        <!-- <div class="my-swiper">
      <carousel-3d :autoplay="true" :autoplayTimeout="3000" :perspective="35" :display="5" :animationSpeed="1000"
        :width="300" :height="250" :controlsVisible="false" :controlsHeight="60">
        <Slide :index="index" :key="index" v-for="(item, index) in imgs">
          <img :src="item" alt="Image 1" class="my-img">
        </Slide>
      </carousel-3d>
    </div> -->
    </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, getCurrentInstance, toRefs } from "vue";
import { Carousel3d, Slide } from 'vue3-carousel-3d';
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox, tabBarProps } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import MyDiolg from "./components/Form.vue";
import {
    ColumnProps,
} from "@/components/ProTable/interface";
import {
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
    Refresh,
    Files
} from "@element-plus/icons-vue";
import {
    deviceNumList,
    devTypeList,
    devOnlineStatusList,
    devUseStatusList,
    findLabel,
} from "@/utils/stata";
import { getDicts } from "@/api/system/dict/data";
import { useHandleData } from "@/hooks/useHandleData";
const proxy = getCurrentInstance()?.proxy;
const router = useRouter();
const ExcelRef = ref(null);
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<any>();
const imgs = ref<any>(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'])
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
const tooltipOptions = {
    'appendT-to': "app",
    'popper-class': "my-tooltip"
}
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
    return {
        list: [
            {
                operationCount: "3秒",
                username: "12",
                devBrand: 0,
                sex: 0,
                createTime: "2023-10-10 10:10:10",
                longString: "舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响",
                stepList: [
                    {
                        step: "1",
                        stepName: "步骤1",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "2",
                        stepName: "步骤2",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "3",
                        stepName: "步骤3",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: false,
                    }
                ]
            },
            {
                operationCount: "3秒",
                username: "12",
                devBrand: 0,
                sex: 1,
                createTime: "2023-10-10 10:10:10",
                longString: "舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响",
                stepList: [
                    {
                        step: "1",
                        stepName: "步骤1",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "2",
                        stepName: "步骤2",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "3",
                        stepName: "步骤3",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    }
                ]
            },
            {
                operationCount: "3秒",
                username: "12",
                devBrand: 0,
                sex: 1,
                createTime: "2023-10-10 10:10:10",
                longString: "舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响",
                stepList: [
                    {
                        step: "1",
                        stepName: "步骤1",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "2",
                        stepName: "步骤2",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "3",
                        stepName: "步骤3",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    }
                ]
            },
            {
                operationCount: "3秒",
                username: "12",
                devBrand: 0,
                sex: 1,
                createTime: "2023-10-10 10:10:10",
                longString: "舟行数日，到得武穴，已是湖北境内。这晚到了福池口，舟子泊了船，准拟过夜，俞莲舟忽听得岸上马嘶声响",
                stepList: [
                    {
                        step: "1",
                        stepName: "步骤1",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "2",
                        stepName: "步骤2",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    },
                    {
                        step: "3",
                        stepName: "步骤3",
                        stepTime: "2023-10-10 10:10:10",
                        stepStatus: true,
                    }
                ]
            },
        ],
        total: 15,
        pageNum: 1,
        pageSize: 10,
    };
};
const importTemplates = () => {
    proxy.download("/system/user/importTemplate", {}, `模板.xlsx`)

}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
    //   let newParams = JSON.parse(JSON.stringify(params));
    //   newParams.createTime && (newParams.startTime = newParams.createTime[0]);
    //   newParams.createTime && (newParams.endTime = newParams.createTime[1]);
    //   delete newParams.createTime;
    //   return getUserList(newParams);
    return PromiseDel;
};
const templateParams = {
    templateName: "demo模板",
    templateUrl: "system/user/importTemplate",
    templateType: 0,
    templateObj: {}
}

// 表格配置项
const columns: any = [
    { type: "index", label: "序号", width: 80, fixed: "left" },
    //1.普通输入框
    {
        prop: "username",
        label: "电池包编号",
        search: { el: "input" },
    },
    {
        prop: "createTime",
        label: "记录时间",
        search: {
            el: "date-picker",
            span: 2,
            props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
            //   defaultValue: ["2022-11-12 11:35:00", "2022-12-12 11:35:00"],
        },
    },
    {
        prop: "operationCount",
        label: "总耗时",
        search: { el: "input" },
    },
    {
        prop: "stepList",
        render: (scope) => {
            let stepList = scope.row.stepList;
            return (
                <div style="display: flex; gap: 8px;">
                    {stepList.map(item => (
                        <el-tag
                            type={item.stepStatus ? "success" : "danger"}
                            style="width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;"
                        >
                            {item.step}
                        </el-tag>
                    ))}
                </div>
            )
        }
    },
    { prop: "operation", label: "操作", fixed: "right", width: 240 },
];

// 删除用户信息
const deleteAccount = async (params: any) => {
    await useHandleData(PromiseDel, { id: [params.id] }, '是否删除编号为' + 1 + '的数据');
    proTable.value?.getTableList();
};
//模拟 调用接口
const PromiseDel = () => new Promise((resolve, reject) => resolve(true))

/** 导出按钮操作 */
function handleExport() {
    proxy.download("system/user/export", {

    }, `user_${new Date().getTime()}.xlsx`);
};
// 打开 drawer(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof MyDiolg> | null>(null);
const openDiolg = (title: string, row: any) => {
    const params = {
        title,
        isView: title === "查看",
        rowData: { ...row },
        api: title === "新增" ? () => Promise.resolve(true) : title === "编辑" ? () => Promise.resolve(true) : undefined,
        getTableList: proTable.value?.getTableList,
    };
    dialogRef.value?.acceptParams(params);
};
</script>
<style lang="scss" scoped>
// .my-swiper {
//   margin-top: 10px;
//   height: 120px;
//   width: 260px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   background-color: aqua;

//   .my-img {
//     width: 100%;
//     height: 100%;
//     object-fit: cover;
//   }

//   .ceshi {
//     height: 120px;
//     width: 120px;
//     background-color: red;
//   }
// }
.my-swiper {
    margin-top: 10px;
    height: 80px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

:deep(.el-carousel__container) {
    height: 70px !important;
}

.my-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.table-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-tooltip {
    width: 220px !important;
}
</style>